<template>
  <div class="inout-container">
    <!-- 面包屑 -->
    <div style="width: auto;height: 60px;font-size: larger;">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">仪表台</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/Inventory' }">库存查询</el-breadcrumb-item>
    <el-breadcrumb-item>出入库流水</el-breadcrumb-item>
  </el-breadcrumb>
    </div>
   
    <!-- 数据容器 -->
    <div class="data-container">
      <!-- 查询 -->
      <div class="search-section">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="仓库名称">
            <el-input v-model="formInline.warename" placeholder="仓库名称" clearable />
          </el-form-item>
          <el-form-item label="业务类型">
            <el-input v-model="formInline.out_InType" placeholder="业务类型" clearable />
          </el-form-item>
          <el-form-item label="出入库日期">
            <el-date-picker
              v-model="formInline.out_InTime"
              type="date"
              placeholder="请选择出入库日期"
              clearable
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="table-section">
        <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed type="index" label="行号" width="100" />
    <el-table-column prop="goodsId" label="货品编码" width="150" />
    <el-table-column prop="operationdate" label="出入库日期" width="120" >
        <template #default="scope">
              {{ formatDate(scope.row.operationdate) }}
            </template>
          </el-table-column>
    <el-table-column prop="recordtype" label="业务类型" width="120" >
       <template #default="scope">
              <el-tag v-if="scope.row.recordtype==1" type="success">出库</el-tag>
               <el-tag v-if="scope.row.recordtype==2" type="success">入库</el-tag>
            </template>
    </el-table-column>
    <el-table-column prop="warename" label="仓库名称" width="120" />
    <el-table-column prop="inNum" label="入库数量" width="120" />
    <el-table-column prop="outNum" label="出库数量" width="120" />
    <el-table-column prop="inMoney" label="入库金额" width="120" />
    <el-table-column prop="outMoney" label="出库金额" width="120" />
        </el-table>
      </div>
        <!-- 分页 -->
    <table>
            <tr>
                <th>
                    <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot, sizes" :total="formInline.count">
                        当前第{{ formInline.PageIndex }}页/共{{ formInline.pcount}}页/共{{
                            formInline.count 
                        }}条
                    </el-pagination>
                </th>
                <th>
                    <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot, prev, pager, next" :total="formInline.count">
                        <el-button :disabled="formInline.PageIndex == 1" @click="formInline.PageIndex = 1"
                            type="primary">首页</el-button>
                    </el-pagination>
                </th>
                <th>
                    <el-pagination v-model:current-page="formInline.PageIndex" v-model:page-size="formInline.PageSize"
                        :page-sizes="[10, 20, 30, 40, 50]" layout="slot,jumper" :total="formInline.count">
                        <el-button :disabled="formInline.PageIndex == formInline.pcount" @click="formInline.PageIndex = formInline.PageSize"
                            type="primary">尾页</el-button>
                    </el-pagination>
                </th>
            </tr>
        </table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { RefSymbol } from '@vue/reactivity'
import axios from 'axios'
import { onMounted, ref, watch } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
const route=useRoute();
const router=useRouter();

const formInline = reactive({
  PageIndex:1,
  PageSize:10,
  warename:"",
  out_InType:"",
  out_InTime:"",
  count:0,
  pcount:0
 
})
// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '-');
};
const tableData=ref([])

const show =()=> {
  var goodscoding = route.query.id;
  const params = {
    PageIndex: formInline.PageIndex,
    PageSize: formInline.PageSize,
     warename: formInline.warename,
    goodscoding: goodscoding,
     out_InType: formInline.out_InType,
     out_InTime: formInline.out_InTime
  }
  


  console.log('发送的参数:', params)
  
  service.post("/api/app/standing__Book/out_In-warehouse-out-put",null, { params }).then(res => {
    tableData.value = res.data.pageDatas || []
    formInline.count = res.data.totalData|| 0
    formInline.pcount =Math.ceil(formInline.count  / formInline.PageSize)|| 0
    
    if (res.data.pageDatas && res.data.pageDatas.length > 0) {
      ElMessage.success(`查询成功，找到 ${res.data.totalData} 条数据`)
    } else {
      ElMessage.warning('查询成功，但没有找到数据')
    }
  }).catch(error => {
    console.error('API请求失败:', error)
    ElMessage.error('查询失败')
  })
}

// 组件挂载时调用
onMounted(()=>{
  console.log('组件挂载完成')
  console.log('当前路由参数:', route.query)
  
  // 延迟一点时间确保路由参数已经准备好
  setTimeout(() => {
    show();
  }, 100);
})

// 查询
import { reactive } from 'vue'
import service from '@/utils/request';

const onSubmit = () => {
  formInline.PageIndex=1;
  show()
}
  const reset=()=>{
    formInline.PageIndex = 1
    formInline.warename="",
     formInline.out_InType="",
  formInline.out_InTime=""
  show()
  }
</script>

<style>
.inout-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  padding: 20px;
}

/* 汇总卡片样式 */
.inout-container > div:nth-child(2) > div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none !important;
  margin-bottom: 20px;
}

/* 数据容器样式 */
.data-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

/* 查询区域样式 */
.search-section {
  padding: 20px;
  border-bottom: 1px solid #f0f2f5;
  background: #fafbfc;
}

.search-section .demo-form-inline {
  margin: 0;
}

/* 表格区域样式 */
.table-section {
  padding: 0;
}

.table-section .el-table {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>